<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>demo</title>
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<link rel="shortcut icon" href="img/touchicon.png"/>
	<link rel="stylesheet" href=""/>
	<style type="text/css">
		#btn{display:inline-block;width:80px;height:40px;line-height:40px;text-align:center;text-decoration:none;color:#fff;outline:1px solid;background:rgba(0,0,255,0.4);}
		
	</style>
</head>
<body>
	<div id="box" style="visibility:visible;">
		<p>This is a paragraph for testing Javascript!</p>
		<p>This is a paragraph for testing Javascript!</p>
		<p>This is a paragraph for testing Javascript!</p>
		<p>This is a paragraph for testing Javascript!</p>
		<p>This is a paragraph for testing Javascript!</p>
	</div>
	<a id="btn">显示</a>
	<script>
		var boxObj = document.getElementById('box');
		var btnObj = document.getElementById('btn');
		var o = window.getComputedStyle(boxObj);
		btnObj.onclick = function () {
			if (boxObj.style.visibility=='visible') {
				boxObj.style.visibility = 'hidden';
				btnObj.innerText = '显示';
			} else {
				boxObj.style.visibility = 'visible';
				btnObj.innerText = '隐藏';
			}
			console.log(typeof box.style.visibility);
			console.log(box.style.visibility);
		}
	</script>
</body>
</html>